import { useState, useEffect } from "react";
import { Form, Select, Input, message, InputNumber } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import AntdWrapper from "@/components/AntdWrapper";
import { inventoryAllocation, getWarehouseList } from "../service";
import { getCurrentUser } from "@/utils/authority";
import { WAREHOUSE_TYPE } from "@/views/utils/constant";

const WarehouseTransferModal = ({ visible, fetchList, record, selectedRows, selectedWarehouse, handleCancel }) => {
	const [form] = Form.useForm();
	const [value, setValue] = useState(1);
	const [putInValue, setPutInValue] = useState(1);
	const [warehouseList, setWarehouseList] = useState([]);
	const [outWarehouseId, setOutWarehouseId] = useState("");
	const [inWarehouseId, setInWarehouseId] = useState("");
	const [warehouseTransferNum, setWarehouseTransferNum] = useState(0);
	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const getWarehouseLists = async (e, type) => {
		const { data, success } = await getWarehouseList({
			kind: e,
			uuid: getCurrentUser().uuid
		});

		if (success) {
			setWarehouseList(data);
		}
		if (type == "out") {
			if (e == 2 || e == 3) {
				selectedRows[0].esInventoryVOList.forEach(i => {
					console.log(i, "ssssssssssssssssssssss");
					console.log(e, "eee");
					if (e == i.type) {
						setWarehouseTransferNum(i.saleableNum);
					}
				});
				setOutWarehouseId(data ? data[0].id : "");
				// form.setFieldValue("warehouseName", data.warehouseName);
			}
		} else {
			if (e == 2 || e == 3) {
				setInWarehouseId(data ? data[0].id : "");
			}
		}
	};
	// 出库
	const outboundWarehouse = (e, type) => {
		setValue(e);
		getWarehouseLists(e, type);
	};
	// 入库
	const putInWarehouse = (e, type) => {
		getWarehouseLists(e, type);
		setPutInValue(e);
	};
	const warehouseSelect = (e, type) => {
		if (type == "out") {
			selectedRows[0].esInventoryVOList.forEach(i => {
				if (e == i.warehouseId) {
					setWarehouseTransferNum(i.saleableNum);
				}
			});
			setOutWarehouseId(e);
		} else {
			setInWarehouseId(e);
		}
	};
	const onOk = () => {
		form.validateFields().then(async value => {
			if (outWarehouseId === inWarehouseId) {
				return message.error("调出仓库、调入仓库不能相同，请重新选择");
			}
			if (!value.price) {
				return message.error("请选择调出仓库");
			}
			if (!value.allocationNum) {
				return message.error("请输入调仓数量");
			}
			if (!value.price4) {
				return message.error("请选择调入数量");
			}
			const extractedList = selectedRows.map(obj => ({ skuId: obj.skuId }));
			extractedList.map(x => (x.outWarehouseId = outWarehouseId));
			extractedList.map(x => (x.inWarehouseId = inWarehouseId));
			extractedList.map(x => (x.allocationNum = value.allocationNum));

			const { success } = await inventoryAllocation(extractedList);
			if (success) {
				message.success("编辑成功");
				onCancel();
				fetchList();
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const options =
		warehouseList.length &&
		warehouseList.map(d => (
			<Option key={d.id} label={d.warehouseName}>
				{d.warehouseName}
			</Option>
		));
	return (
		<CommonModal title={{ title: "调仓" }} visible={true} onOk={onOk} width={"494px"} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<AntdWrapper label={<div>调出仓库：</div>} style={{ width: "100%", marginLeft: 8 }}>
					<div className="flex">
						<Form.Item name="price" label="">
							<Select
								placeholder="选择仓库"
								onChange={e => outboundWarehouse(e, "out")}
								style={{ width: 100 }}
								options={WAREHOUSE_TYPE}
							/>
						</Form.Item>
						<Form.Item name="outWarehouseId" label="">
							{value == 1 && (
								<Select
									placeholder="请选择发货仓"
									optionFilterProp="label"
									style={{ width: 250 }}
									onChange={e => warehouseSelect(e, "out")}
								>
									{options}
								</Select>
							)}
							{(value == 2 || value == 3) && (
								<Select placeholder={value == 2 ? "次品仓" : "销退仓"} disabled optionFilterProp="label" style={{ width: 250 }}>
									{options}
								</Select>
							)}
						</Form.Item>
					</div>
				</AntdWrapper>
				<AntdWrapper label={<div>调仓数量：</div>} style={{ width: "100%", marginLeft: 8 }}>
					<Form.Item name="allocationNum" label="">
						<InputNumber placeholder="请输入数值" max={warehouseTransferNum} />
					</Form.Item>
				</AntdWrapper>
				<div style={{ color: "rgba(153, 153, 153, 1)", marginLeft: 16 }}>可调仓数量：{warehouseTransferNum}</div>
				<AntdWrapper label={<div>调入仓库：</div>} style={{ width: "100%", marginLeft: 8 }}>
					<div className="flex">
						<Form.Item name="price4" label="">
							<Select
								placeholder="选择仓库"
								onChange={e => putInWarehouse(e, "in")}
								style={{ width: 100 }}
								options={WAREHOUSE_TYPE}
							/>
						</Form.Item>
						<Form.Item name="inWarehouseId" label="">
							{putInValue == 1 && (
								<Select
									placeholder="请选择发货仓"
									optionFilterProp="label"
									style={{ width: 250 }}
									onChange={e => warehouseSelect(e, "in")}
								>
									{options}
								</Select>
							)}
							{(putInValue == 2 || putInValue == 3) && (
								<Select
									placeholder={putInValue == 2 ? "次品仓" : "销退仓"}
									disabled
									optionFilterProp="label"
									style={{ width: 250 }}
								>
									{options}
								</Select>
							)}
						</Form.Item>
					</div>
				</AntdWrapper>
			</Form>
		</CommonModal>
	);
};

export default WarehouseTransferModal;
